<template>
  <div>
    <h1>App</h1>
    <div>
      <label class="form-label"></label>
      <!-- 
      数据变化->视图变化
      视图变化->触发事件->事件中修改数据
       -->
      <input type="text" class="form-control" @input="username = $event.target.value"
        :value="username">
      <!-- <input type="text" class="form-control" v-model="username"> -->
      username: {{ username }}
    </div>

    <div @change="gender = $event.target.value">
      <label class="form-label">性别</label>
      <input type="radio" name="gender" :checked="gender === '1'" value="1"> 男
      <input type="radio" name="gender" :checked="gender === '2'" value="2"> 女
      {{ gender }}
    </div>

    <div>
      <input type="checkbox" :checked="allow" @change="allow = $event.target.checked">
      <label class="form-label">是否同意</label>
      {{ allow }}
    </div>

    <div @change="log">
      爱好
      <input type="checkbox" :checked="hobby.includes('css')" value="css">CSS
      <input type="checkbox" :checked="hobby.includes('html')" value="html">HTML
      <input type="checkbox" :checked="hobby.includes('js')" value="js">JS
      <input type="checkbox" :checked="hobby.includes('vue')" value="vue">Vue
      {{ hobby }}
    </div>
    <div>
      city
      <select @change="city = $event.target.value">
        <option :selected="city === 'nj'" value="nj">南京</option>
        <option :selected="city === 'sh'" value="sh">上海</option>
        <option :selected="city === 'wx'" value="wx">无锡</option>
        <option :selected="city === 'sz'" value="sz">苏州</option>
      </select>
      {{ city }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const username = ref('jack');
const city = ref('sh');
const gender = ref('1');
const allow = ref(true);
const hobby = ref(['css', 'vue']);

function log(e) {
  hobby.value = [...e.currentTarget.querySelectorAll('input:checked')].map(el => el.value);
}


</script>


<style>
div {
  border: solid;
  padding: 20px
}
</style>